<template>
  <div class="detail-modal flex column">
    <div class="header flex column justify-around">
      <div class="name text-overflow">{{ restaurantInfo.restaurantName }}</div>
      <div class="address">
        <span class="label">营业地址：</span>
        <span class="value">{{ restaurantInfo.detailAddress || '暂无' }}</span>
      </div>

      <div class="btn-group">
        <!-- <div class="edit cursor" @click="editRestaurant">
          <img src="@/assets/imgs/restaurant/edit.png" alt="" />
          编辑
        </div> -->
        <a-popconfirm title="确定删除此餐厅吗?" @confirm="() => handelDelRestaurant()">
          <div class="delete cursor">
            <img src="@/assets/imgs/restaurant/del.png" alt="" />
            删除
          </div>
        </a-popconfirm>
      </div>
    </div>
    <div class="content">
      <div class="flex">
        <div class="f1 common-wrap">
          <div class="lable">所属街道:</div>
          <div class="value">{{ record.regionId_dictText }}</div>
        </div>
        <div class="f1 common-wrap">
          <div class="lable">监管单位:</div>
          <div class="value">{{ record.unitId_dictText }}</div>
        </div>
      </div>
      <div class="flex">
        <div class="f1 common-wrap">
          <div class="lable">负责人姓名:</div>
          <div class="value">{{ restaurantInfo.chargeName }}</div>
        </div>
        <div class="f1 common-wrap">
          <div class="lable">负责人电话:</div>
          <div class="value">{{ restaurantInfo.chargePhone }}</div>
        </div>
      </div>
      <div class="flex">
        <div class="f1 common-wrap">
          <div class="lable">清洗周期:</div>
          <div class="value">{{ restaurantInfo.cleanCycle }}天</div>
        </div>
        <div class="f1 common-wrap">
          <div class="lable">清洗倒计时：</div>
          <!-- <div class="value">{{ restaurantInfo.expireDay }}天</div> -->
          <div class="value" v-if="record.expireDay > 0">{{ record.expireDay }}天</div>
          <div class="value" v-else style="color: #ff517b">逾期{{ record.expireDay * -1 }}天</div>
        </div>
      </div>
      <div class="flex">
        <div class="f1 common-wrap">
          <div class="lable">营业执照照片:</div>
          <div class="value cursor" style="color: #00fe9f" @click="werImg('minImg')">
            查看
            <img
              id="minImg"
              style="display: none"
              :src="`${imgPrefix + restaurantInfo.businessPhoto}`"
              :data-original="`${imgPrefix + restaurantInfo.businessPhoto}`"
            />
          </div>
        </div>
        <div class="f1 common-wrap">
          <div class="lable">营业信息:</div>
          <div class="value cursor" style="color: #00fe9f" @click="showBussinessInfo">查看</div>
        </div>
      </div>
      <div class="flex">
        <div class="f1 common-wrap">
          <div class="lable">第三方检测记录:</div>
          <div class="value cursor" style="color: #00fe9f" @click="showExaminingReport">查看</div>
        </div>
        <div class="f1 common-wrap">
          <div class="lable">清洗合同:</div>
          <div class="value cursor" style="color: #00fe9f" @click="showContractOfCleaning">查看</div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="header-title">退出详情：</div>
      <div class="common-wrap">
        <div class="lable">退出时间:</div>
        <div class="value">{{ record.outTime }}</div>
      </div>
      <div class="common-wrap">
        <div class="lable">操作人员:</div>
        <div class="value">{{ record.outUserName }}</div>
      </div>
      <div class="common-wrap">
        <div class="lable">退出理由:</div>
        <div class="value">{{ record.outMemo }}</div>
      </div>
    </div>
    <bussiness-info ref="bussinessInfo" :record.sync="record"></bussiness-info>
    <edit-restaurant ref="editRestaurant" @refresh="refresh"></edit-restaurant>
    <examining-report ref="examiningReport"></examining-report>
    <contract-of-cleaning ref="contractOfCleaning"></contract-of-cleaning>
    <nominal-value ref="nominalValue" @refresh="refresh"></nominal-value>
  </div>
</template>

<script>
import Viewer from 'viewerjs'
import 'viewerjs/dist/viewer.css'
import { getAction } from '@/api/manage'
import { comMethods } from '@/mixins/comMethods'
import { deviceDel } from '@/api/device'
import { delRestaurant, detailRestaurant } from '@/api/restaurant'
import bussinessInfo from '../modules/businessInfo'
import editRestaurant from '../modules/editRestaurantInfo'
import examiningReport from '../modules/examiningReport'
import contractOfCleaning from '../modules/contractOfCleaning'
import nominalValue from '../modules/nominalValue'
export default {
  name: '',
  props: {
    isShowFooter: {
      type: Boolean,
      default: true,
    },
    record: {
      type: Object,
    },
  },
  watch: {
    record: {
      immediate: true,
      handler(val) {
        console.log(val, 'val')
        this.getDevice()
        this.getdetailRestaurant()
      },
    },
  },
  mixins: [comMethods],
  components: { bussinessInfo, editRestaurant, examiningReport, contractOfCleaning, nominalValue },
  data() {
    return {
      imgPrefix: '',
      deviceList: [],
      restaurantInfo: {},
    }
  },
  mounted() {
    this.getDevice()
    this.getdetailRestaurant()
  },
  methods: {
    werImg(id) {
      const ViewerDom = document.getElementById(id)
      const viewer = new Viewer(ViewerDom, {
        toolbar: false,
        button: false,
        navbar: false,
        title: false,
        url: 'data-original',
        hide: function () {
          viewer.destroy()
        },
      })
      viewer.show() // 点击图片放大注销此方法
    },

    async getDevice() {
      let {
        result: { records },
      } = await getAction('/device/page', { unitId: this.record.unitId, restaurantId: this.record.id })
      this.deviceList = records
    },

    async getdetailRestaurant() {
      let { result } = await detailRestaurant({ restaurantId: this.record.id })
      this.restaurantInfo = result
    },

    async deleteDevice(id) {
      let res = await deviceDel({ id })
      this.$message.success(res.message)
      this.getDevice()
    },

    showBussinessInfo() {
      this.$refs.bussinessInfo.show()
    },

    editRestaurant() {
      this.$refs.editRestaurant.show(this.record)
    },

    refresh() {
      this.getDevice()
      this.getdetailRestaurant()
      this.$emit('refresh')
    },
    async handelDelRestaurant() {
      await delRestaurant({ id: this.record.id })
      this.$emit('handleOk')
    },

    showExaminingReport() {
      this.$refs.examiningReport.show(this.record)
    },

    showContractOfCleaning() {
      this.$refs.contractOfCleaning.show(this.record)
    },

    showNromalValueEdit(id) {
      this.$refs.nominalValue.show(id)
    },
  },
  destroyed() {},
}
</script>

<style scoped lang="less">
.detail-modal {
  width: 5.4rem;
  height: 6rem;
  background: #024c4e;
  display: flex;
  flex-direction: column;
  border: 1px solid #025d60;
  font-family: PingFang SC-Bold, PingFang SC;

  .header {
    position: relative;
    padding-left: 20px;
    height: 90px;
    border-bottom: 1px solid #025d60;

    .name {
      font-size: 16px;
      font-weight: bold;
      color: #06d6db;
      max-width: 380px;
    }
    .label {
      font-size: 14px;
      font-weight: 400;
      color: #02c1c7;
    }
    .value {
      font-size: 14px;
      font-weight: 400;
      color: #9cfdff;
    }

    .btn-group {
      position: absolute;
      top: 14px;
      right: 10px;
      display: flex;

      font-size: 14px;
      font-weight: 400;
      .edit {
        color: #00fe9f;
      }
      .delete {
        color: #ff7551;
        margin-left: 15px;
      }
    }
  }
  .content {
    height: 200px;
    padding-left: 20px;
  }

  .bottom {
    flex: 1;
    overflow: auto;
    padding: 0 20px;
    border-top: 2px solid #025d60;
    &::-webkit-scrollbar {
      width: 0;
    }
  }

  .header-title {
    margin-top: 0.2rem;
    font-size: 0.14rem;
    font-weight: bold;
    color: #00f8ff;
  }
  .common-wrap {
    font-size: 0.14rem;
    font-weight: 400;
    margin-top: 0.16rem;
    display: flex;
    .lable {
      color: #02c1c7;
    }
    .value {
      color: #9cfdff;
      margin-left: 0.05rem;
    }
  }
}
</style>
